<template>
    <div class="home">
        <h1 class="logo">
            <a href="/">
                <img src="@/assets/img/401/logo.png" alt="">
            </a>
            <span class="el-icon-time">{{ clock }}</span>
        </h1>
        <br />
        <br />
        <div class="banner">
            <br />
            <br />
            <br />
            <br />
            <div class="top-item">
                <a href="http://192.168.6.11:8081/#/401/" class="item-link" target="_black">
                    <img src="@/assets/img/zidonghuasuo/icon1.png" alt="">
                    <span>深度学习</span>
                </a>
                <a href="http://192.168.6.11:8081/rl#/401rl" class="item-link" target="_black">
                    <img src="@/assets/img/zidonghuasuo/icon2.png" alt="">
                    <span>强化学习</span>
                </a>
                <a href="http://192.168.6.11:8081/console#/" class="item-link" target="_black">
                    <img src="@/assets/img/zidonghuasuo/icon3.png" alt="">
                    <span>集群管理</span>
                </a>
            </div>
        </div>
    </div>
</template>
  
<script>
import { formatTime } from '@/utils/tool'
export default {
    name: "zidonghuasuo",
    data() {
        return {
            clock: '',
            clockTime: null
        };
    },
    components: {

    },
    methods: {

    },
    created() {

    },
    watch: {},
    mounted() {
        this.clockTime = setInterval(() => {
            this.clock = formatTime(new Date(), 'YYYY-MM-DD HH:mm:ss')
        }, 1000)
    },
    destroyed() {
        clearInterval(this.clockTime)
    },
};
</script>
<style lang="less" scoped>
.logo {
    padding: 0 24px;
    overflow: hidden;

    a {
        padding-top: 10px;
        float: left;

        img {
            display: block;
            height: 66px;
        }
    }

    span {
        color: #347AF8;
        font-weight: bold;
        font-size: 24px;
        line-height: 56px;
        float: right;
    }
}

.home {
    padding: 0 24px;
    height: 100%;
}

.banner {
    background: url(~@/assets/img/zidonghuasuo/home-banner.png) no-repeat center 0 #FFF;
    background-size: 1872px 806px;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .top-item {
        width: 1188px;
        margin: 58px auto 0;
        display: flex;
        justify-content: space-between;

        .item-link {
            width: 218px;
            background: url(~@/assets/img/zidonghuasuo/icon-bg.png) no-repeat;
            background-size: 218px 262px;
            display: block;

            img {
                display: block;
                width: 105px;
                height: 100px;
                margin: 48px auto 0;
            }

            span {
                margin-top: 125px;
                line-height: 34px;
                text-align: center;
                display: block;
                font-size: 24px;
                color: #3D3D3D;
            }
        }
    }

    .banner-item {
        img {
            display: block;
            width: 446px;
            height: 347px;
            margin: 0 auto;
        }
    }
}

.data-lis {
    padding: 8px 12px;
    background: #FFF;
    display: flex;
    margin-top: 16px;

    li {
        height: 150px;
        flex: 1;
        margin: 0 12px;
        border-radius: 8px;

        .title {
            float: left;
            font-weight: bold;
            font-size: 24px;
            line-height: 150px;
            color: #FFF;
            padding-left: 38px;
        }

        .detail {
            float: right;
            padding-right: 40px;
            font-size: 36px;
            padding-top: 60px;
            color: #FFF;
            text-align: right;
            display: block;
            font-family: "BM Hanna Pro-Regular, BM Hanna Pro";

            span {
                padding-top: 10px;
                line-height: 20px;
                display: block;
                font-size: 14px;
            }
        }
    }

    .lis1 {
        background: linear-gradient(134deg, #F1C04A 0%, #EE7E4C 100%);
    }

    .lis2 {
        background: linear-gradient(135deg, #60A7F8 0%, #2E79F6 100%);
    }

    .lis3 {
        background: linear-gradient(135deg, #7DDEF8 0%, #00ADE9 99%);
    }

    .lis4 {
        background: linear-gradient(135deg, #A7A2FF 0%, #746DFC 100%);
    }
}

.clan {
    display: flex;
    margin-top: 16px;
    width: 100%;

    .title {
        width: 280px;
        height: 210px;
        background: #FFFFFF;

        .name {
            font-size: 32px;
            line-height: 52px;
            padding-top: 50px;
            text-align: center;
        }

        .number {
            height: 45px;
            font-size: 32px;
            font-weight: 600;
            color: #2E79F6;
            text-align: center;
            margin-top: 10px;

            span {
                color: #3D3D3D;
                font-size: 14px;
            }
        }
    }

    .item {
        flex: 1;
        margin-left: 20px;

        p {
            line-height: 40px;
            font-size: 18px;
            padding: 0 20px;
            font-weight: bold;
            border-top: 1px solid #347AF8;
            background: #FFF;

            span {
                float: right;
                font-weight: normal;
                font-size: 16px;

                &::before {
                    display: inline-block;
                    content: ' ';
                    width: 12px;
                    height: 12px;
                    border-radius: 10px;
                    vertical-align: middle;
                    margin-right: 4px;
                }
            }

            .fault {
                &::before {
                    background: #F56C6C;
                }
            }

            .healthy {
                &::before {
                    background: #67C23A;
                }
            }
        }

        .pic {
            display: block;
            width: 100%;
            height: 170px;
        }
    }
}
</style>
  